<template>
	<div class="menuLeft">
		<el-menu mode="vertical" default-active="kidney" class="el-menu-vertical-demo"  >
			<el-menu-item index="home" @click="changeColor('menu')">
				<router-link to="/kidney" :class="{actived: activedMenu=='menu'}"><i class="el-icon-message" ></i>首页</router-link>
			</el-menu-item>
			<el-menu-item-group v-for="(item,key) in menuData" :key="item.index">
				<template slot="title">
					<i :class="item.icon"></i>{{item.text}}
				</template>
				<el-menu-item :index="child.index" v-for="(child,childKey) in item.children" :key="child.index" @click="changeColor(child.index)" :class="{actived: activedMenu==child.index}">
					<router-link :to="child.router"  >{{child.text}}</router-link>
				</el-menu-item>
			</el-menu-item-group>
		</el-menu>	   					
	</div>
</template>
<script>
export default {
	data() {
		return {
			menuData: [{
				text: '患者管理',
				icon: 'el-icon-message',
				index: '5',
				children: [{
					text: '术后随访患者',
					router: '/kidney',
					index: '1'
				},{
					text: '等待移植患者',
					router: '/waitPort',
					index: '/waitPort'
				}]
			},{
				text: '匹配',
				icon: 'el-icon-message',
				index: '6',
				children: [{
					text: '肾源配型',
					router: '/kidney',
					index: '/kidney'
				}]
			},{
				text: '管理',
				icon: 'el-icon-message',
				index: '7',
				children: [{
					text: '随访设计设置',
					router: '/kidney',
					index: '2'
				},{
					text: '用户管理',
					router: '/kidney',
					index: '3'
				},{
					text: '参数设置',
					router: '/kidney',
					index: '4'
				}]
			}],
			activedMenu: 'menu'
		}
	},
	computed: {
			
	},
	methods: {
		changeColor(index){
			var self = this;
			self.activedMenu = index;
		}
	},
	components: {

	}
}
</script>
<style lang='scss' rel='stylesheet/scss' scoped>
	.menuLeft{
		.actived{
			background: #06aea6;
		}
		.el-menu{
			background: #fff;
			.el-menu-item-group{
				.el-menu-item-group__title{
					margin-bottom: 24px;
				}
				.el-menu-item{
					padding-left: 45px !important;
					height: 36px;
					line-height: 36px;
				}
			}
			.el-menu-item:hover{
				background: #fff;
			}
			i{
				margin-right: 10px;
			}
		}
	}
	
</style>
